<template>
  <div class="login">
    <div class="form">
      <h2> 登录界面 </h2>

      <input type="text" placeholder="用户名" v-model="username" required="true">
      <input type="password" placeholder="密码" v-model="password" required="true">

      <input type="radio" id="user" value="user" v-model="userType">
      <label for="user">用户</label>

      <input type="radio" id="admin" value="admin" v-model="userType">
      <label for="admin">管理员</label>

      <div>
	<input type="text" name="imageCode" placeholder="验证码" style="width: 50%" v-model="validateCode"><br>
	<div class="row">
	  <img ref="image">  <!-- src=/code/image -->
	  <button @click="refreshCode">刷新</button>
	</div>
      </div>

      <button type="submit" @click="submitLogin">登录</button>

      <p class="error-message"> {{errorMessage}}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
 import { ref } from "@vue/reactivity";
 import {login } from '@/service'
 import {useRouter} from 'vue-router'
 import { onMounted } from "@vue/runtime-core";

 const router = useRouter()
 const image = ref<HTMLImageElement>()

 const username = ref('hello')
 const password = ref('world')
 const errorMessage = ref('')
 const userType = ref('user')
 const validateCode = ref('')
 const imageURL = 'http://localhost:8081/user/login/code'

 const ResponseStatus = {
   OK: 1,
   ERROR: 2
 }


 async function submitLogin() {

   let request: LoginRequest = {
     username: username.value,
     passwordHash: btoa(password.value),
     validateCode: validateCode.value
   }

   let {message, statusCode} = await login(request)
   
   errorMessage.value = message

   if(statusCode == ResponseStatus.OK) {
     console.log('login success')
     if(userType.value == 'user') {
       // router.push({name: 'UserHome', params: {loginUser: username.value}})
     } else {
       // router.push({name: 'AdminHome', params: {loginUser: username.value}})
     }
   } else {
     console.log('login failed')
     refreshCode()
   }
 }

 function refreshCode() {
   // TODO here, may be I need to add a function into UserService
   let url = imageURL
   let xhr = new XMLHttpRequest()
   xhr.open('GET', url, true)
   xhr.responseType = 'blob'
   xhr.withCredentials = true
   // xhr.setRequestHeader('client_type', 'DESKTOP_WEB')
   xhr.onload = function() {
     if(this.status == 200) {
       let blob = this.response
       image.value!.onload = e => {
	 window.URL.revokeObjectURL(image.value!.src)
       }

       image.value!.src = window.URL.createObjectURL(blob)
     }
   }

   xhr.send()
 }

 onMounted(() => {
   refreshCode()
 })
</script>

<style lang="scss" scoped>
 div.login {
   width: 360px;
   /* padding: 8% 0 0; */
   margin-top: 8%;
   margin-left: auto;
   margin-right: auto;
   

   div.form {
     position: relative;
     z-index: 1;
     background: #ffffff;
     max-width: 360px;
     margin: 0 auto 100px;
     padding: 45px;
     text-align: center;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

     input[type=text], input[type=password] {
       outline: 0;
       background: #f2f2f2;
       width: 100%;
       border: 0;
       margin: 0 0 15px;
       padding: 15px;
       box-sizing: border-box;
       font-size: 14px;
     }

     button[type=submit] {
       text-transform: uppercase;
       outline: 0;
       background: #4caf50;
       width: 100%;
       border: 0;
       padding: 15px;
       color: #ffffff;
       font-size: 14px;
       transition: all 0.3s ease;
       cursor: pointer;

       &:hover, &:active, &:focus {
	 background: #43a047;
       }
     }


     div.row {
       display: flex;
       justify-content: center;
       margin-bottom: 15px;
     }
   }
 }
</style>
